<template>
  <div id="ChinaLineChart" style="display: flex"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "ChinaLineChart",
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      $.get(this.$BaseUrl+"/chinaAsiangameInfo/getall",function(res){
        console.log(res);
        let all=[[],[]]
        res.forEach((value,index)=>{
          all[0].push(value['countPlayer']);
          all[1].push(value['year'])
        });
        console.log(all);

      const chartDom = document.getElementById('china-center-bottom');
      const myChart = echarts.init(chartDom);
      let option;


      option = {
        xAxis: {
          type: 'category',
          data:all[1]
        },title: {
          text: '中国历届参赛人数变化',
          subtext: '数据来源:百度百科',
          left: 'center'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:all[0],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    })
      window.addEventListener("resize",()=>{
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped>
#ChinaLineChart{
  position: absolute;
  width: 90%;
  height: 90%;
}
</style>
